<gm:page title="Molwebs Mashup" authenticate="false">

  <div class="gm-app-header">
    <h1>Molwebs Mashup..</h1>
    <h2>Where it all comes Together...</h2>
  </div>

  <gm:tabs target="myContainer"/>

  <gm:container id="myContainer" style="width:600px">
      
    <gm:section id="section1" title="Intro">
      Mashup TEST
    </gm:section>

    <gm:section id="section2" title="Map">   
      <table width="1024">
     <tr>
       <td width="300" valign="top">
         <gm:list id="list" template="photoList" height="300" data="http://picasaweb.google.nl/data/feed/base/user/m.olislaegers/albumid/5248909738410001921?alt=atom&kind=photo&hl=en_US">
           <gm:handleEvent src="map" event="select"/>
         </gm:list>
       </td>
      <td>
         <gm:map id="map" height="300" data="${list}">
           <gm:handleEvent src="list" event="select"/>
         </gm:map>
       </td>
       <td width="300">
         <gm:item template="photo">
           <gm:handleEvent src="list" event="select"/>
         </gm:item>
       </td>
     </tr>
  </table>

    
       </gm:section>

</gm:container>
  <gm:template id="photoList">
     <div repeat="true" style="padding: 5px">
        <gm:image ref="media:group/media:thumbnail/@url" height="54" width="54" mode="fill" style="float: left"/>
        <gm:text ref="atom:title"/>
        <br style="clear: both"/>
     </div>
  </gm:template>

  <gm:template id="photo">
    <gm:image ref="media:group/media:thumbnail[@width='288']/@url"/>
    <gm:image ref="media:group/media:thumbnail[@height='288']/@url"/>
  </gm:template> 
</gm:page>
